

<template>
  <div class="panel">
    <div class="pic" :style="{ color:props.color}"> 
    <div class="iconWarp">
        <slot>
             <AppstoreFilled class="icon" :style="{ color:props.color}"/>
        </slot>
    </div>
        
    </div>
    <div class="right">
        <h3 class="title">{{ props.title }}</h3>
        <!-- <span class="count">{{ props.num }}</span> -->
        <count-up class="count" :end-val="props.num"></count-up>
    </div>
  
  </div>
</template>
<script setup>
import {AppstoreFilled} from "@ant-design/icons-vue";
import CountUp from "vue-countup-v3";
// 接收父组件的值
const props = defineProps({
    color:{
        type:String,
        default:"#f00",
    },
    title:{
        type:String,
        default:"标题",
    },
    num:{
        type:Number,
        default:0,
    }
})
</script>
<style scoped lang = "less">

.panel{
display: flex;
justify-content: space-between;
background-color: #fff;
padding: 20px 10px;
cursor: pointer;
&:hover{
    .pic{
        background-color: currentColor;
    }
    .iconWarp{
       color: #fff !important;
    }

}

    .pic{
        width: 60px;
        height: 60px;
        font-size: 50px;
        border-radius: 3px;
        transition: all 2s;
    }
    .right{
        display: flex;
        flex-direction: column;
        justify-content: center;
        h3{
        line-height: 26px;
        font-size: 16px;
        color: #999;
    }
     .count{
        font-size: 16px;
    }
    }
   
   
}

</style>
